<template>
	<view class='tab_page'>
		<view class="header">
			<view class="title">
				报验
			</view>
			<view class="btn add" @click="addInspect">
				<image src="/static/image/add.png" mode="" /> 新建报验申请表
			</view>
			<view class="btn export">
				<image src="/static/image/export.png" mode="" /> 导出
			</view>
		</view>
		<view class="menu">
			<!-- 单位工程名称 -->
			<view class="select" @click="hanleUnit(showUnit)">
				{{ currentUnit || '请选择单位工程名称'}}
				<image v-if="showUnit" src="/static/image/open.png" mode="" />
				<image v-else src="/static/image/close.png" mode="" />
			</view>
			<view class="list" v-if="showUnit">
				<view class="list_box">
					<view class="none vice_text" v-if="!unitList.length">暂无数据</view>
					<view class="item vice_text" v-for="item in unitList" :key="item.name"
						@click="handleCurrent(item.name)">
						{{item.name}}
						<image src="/static/image/edit.png" @click.stop="editCurrent(item.name)" />
					</view>
				</view>
			</view>
			<!-- 分部工程名称 -->
			<view class="select" @click="hanleBranch(showBranch)" v-if="!showUnit">
				{{ currentBranch || '请选择分部工程名称'}}
				<image v-if="showBranch" src="/static/image/open.png" mode="" />
				<image v-else src="/static/image/close.png" mode="" />
			</view>
			<view class="list" v-if="showBranch">
				<view class="list_box">
					<view class="none vice_text" v-if="!branchList.length">暂无数据</view>
					<view class="item vice_text" v-for="item in branchList" :key="item.name"
						@click="handleCurrent(item.name)">
						{{item.name}}
						<image src="/static/image/edit.png" @click.stop="editCurrent(item.name)" />
					</view>
				</view>
			</view>
			<!-- 分项工程名称 -->
			<view class="select" @click="hanleItem(showItem)" v-if="(!showBranch )&&(!showUnit)">
				{{ currentItem || '请选择分项工程名称'}}
				<image v-if="showItem" src="/static/image/open.png" mode="" />
				<image v-else src="/static/image/close.png" mode="" />
			</view>
			<view class="list" v-if="showItem">
				<view class="list_box">
					<view class="none vice_text" v-if="!itemList.length">暂无数据</view>
					<view class="item vice_text" v-for="item in itemList" :key="item.name"
						@click="handleCurrent(item.name)">
						{{item.name}}
						<image src="/static/image/edit.png" @click.stop="editCurrent(item.name)" />
					</view>
				</view>
			</view>
			<!-- 检验批 -->
			<view class="select" @click="hanleBatch(showBatch)" v-if="(!showItem) &&(!showBranch )&&(!showUnit)">
				{{ currentBatch || '请选择检验批'}}
				<image v-if="showBatch" src="/static/image/open.png" mode="" />
				<image v-else src="/static/image/close.png" mode="" />
			</view>
			<view class="list" v-if="showBatch">
				<view class="list_box">
					<view class="none vice_text" v-if="!batchList.length">暂无数据</view>
					<view class="item vice_text" v-for="item in batchList" :key="item.name"
						@click="handleCurrent(item.name)">
						{{item.name}}
						<image src="/static/image/edit.png" @click.stop="editCurrent(item.name)" />
					</view>
				</view>
			</view>
		</view>

		<view class="apply-list">
			<view class="apply" @click="handleInspect(item.id)" v-for="item in projectPartList" :key="item.id">
				<view class="title_text">{{item.name}}</view>
				<view class="is-inspect" v-if="item.submitStatus">已提交报验</view>
				<view class="next">
					<image src="/static/image/next.png" mode=""></image>
				</view>
			</view>
		</view>

		<tab-bar activeWay='inspect'></tab-bar>

		<u-popup :show="showPopup" mode='center' @close="handleClose">
			<view class="my-popup">
				<view class="head" @click="handleClose">
					<image src="/static/image/back.png" mode="" />
					<view class="title_text">编辑</view>
					<view class="blank"></view>
				</view>
				<view class="form">
					<form @submit="formSubmit" ref="form">
						<view class="title_text">{{listType}}</view>
						<view class="my-input">
							<input v-model="newValue" class="uni-input" name="newValue" :placeholder="currentEdit" />
						</view>
						<button form-type="submit" class="confirm" type="primary">保存</button>
					</form>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showAddMenu" mode='center' @close="closeAddMenu">
			<view class="menu_popup">
				<view class="head" @click="handleBack">
					<image src="/static/image/back.png" mode="" />
					<view class="title_text">请输入</view>
					<view class="blank"></view>
				</view>
				<view class="form">
					<form @submit="menuFormSubmit" ref="form">
						<view class="pre" v-if="menuFormStatus==0">
							<view class="title_text">单位工程<text>*</text></view>
							<view class="my-input">
								<input v-model="menuForm.unitProject" class="uni-input" name="unitProject"
									placeholder="请输入单位工程名称" />
							</view>
							<view class="title_text">分部工程<text>*</text></view>
							<view class="my-input">
								<input v-model="menuForm.divisionProject" class="uni-input" name="divisionProject"
									placeholder="请输入分部工程名称" />
							</view>
							<view class="title_text">分项工程<text>*</text></view>
							<view class="my-input">
								<input v-model="menuForm.subitemProject" class="uni-input" name="subitemProject"
									placeholder="请输入分项工程名称" />
							</view>
							<view class="title_text">检验批<text>*</text></view>
							<view class="my-input">
								<input v-model="menuForm.inspectionBatch" class="uni-input" name="inspectionBatch"
									placeholder="请输入检验批" />
							</view>
						</view>
						<view class="next" v-else>
							<view class="title_text">检验批名称<text>*</text></view>
							<view class="my-input">
								<input v-model="menuForm.projectPartName" class="uni-input" name="projectPartName"
									placeholder="请输入检验批" />
							</view>
						</view>
						<button v-if="menuFormStatus==0" class="confirm" @click="handleNext" type="primary">下一步</button>
						<button v-else form-type="submit" class="confirm" type="primary">确认</button>
					</form>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import TabBar from '@/components/TabBar.vue'

	export default {
		components: {
			TabBar
		},
		data() {
			return {
				showUnit: false,
				showBranch: false,
				showItem: false,
				showBatch: false,
				currentUnit: '',
				currentBranch: '',
				currentItem: '',
				currentBatch: '',
				unitList: [],
				branchList: [],
				itemList: [],
				batchList: [],
				projectPartList: [],
				listType: '',
				currentEdit: '',
				showPopup: false,
				showAddMenu: false,
				menuData: [],
				menuForm: {
					unitProject: '',
					divisionProject: '',
					subitemProject: '',
					inspectionBatch: '',
					projectPartName: ''
				},
				menuFormStatus: 0,
				newValue: ''
			}
		},
		onLoad() {
			this.currentUnit = uni.getStorageSync('currentUnit')
			this.currentBranch = uni.getStorageSync('currentBranch')
			this.currentItem = uni.getStorageSync('currentItem')
			this.currentBatch = uni.getStorageSync('currentBatch')
			this.initMenuList()
		},
		onShow() {
			console.log('onShow');
		},
		onUnload() {
			console.log('onUnload');
			uni.setStorageSync('currentUnit', this.currentUnit);
			uni.setStorageSync('currentBranch', this.currentBranch);
			uni.setStorageSync('currentItem', this.currentItem);
			uni.setStorageSync('currentBatch', this.currentBatch);
		},
		methods: {
			initMenuList() {
				request(`/supervision/ledger/list`).then((res) => {
					console.log(res.data.data, 'initActivity');
					this.menuData = res.data.data
					this.unitList = this.menuData
					this.branchList = this.unitList?.filter(item => {
						return item.name == this.currentUnit
					})[0]?.children
					this.itemList = this.branchList?.filter(item => {
						return item.name == this.currentBranch
					})[0]?.children
					this.batchList = this.itemList?.filter(item => {
						return item.name == this.currentItem
					})[0]?.children
					this.projectPartList = this.batchList.filter(item => {
						return item.name == this.currentBatch
					})[0].children
				})
			},
			initInfo() {
				this.showUnit = false
				this.showBranch = false
				this.showItem = false
				this.showBatch = false
			},
			addInspect() {
				this.showAddMenu = true
			},

			handleInspect(id) {
				console.log(id,'handleInspect');
				uni.navigateTo({
					url: `/pages/formPage/inspectForm/inspectForm?id=${id}`
				});
			},
			handleCurrent(current) {
				this.projectPartList = []
				if (this.showUnit) {
					this.currentUnit = current
					this.currentBranch = ''
					this.currentItem = ''
					this.currentBatch = ''
				} else if (this.showBranch) {
					this.currentBranch = current
					this.currentItem = ''
					this.currentBatch = ''
				} else if (this.showItem) {
					this.currentItem = current
					this.currentBatch = ''
				} else if (this.showBatch) {
					this.currentBatch = current
					this.projectPartList = this.batchList.filter(item => {
						return item.name == this.currentBatch
					})[0].children
					console.log(this.projectPartList, 'this.projectPartList');
				}
				this.initInfo()
			},
			editCurrent(name) {
				this.showPopup = true
				this.currentEdit = name
			},
			handleClose() {
				this.newValue = ''
				this.showPopup = false
			},
			closeAddMenu() {
				this.showAddMenu = false
				this.menuFormStatus = 0
				for (let key in this.menuForm) {
					console.log(key, this.menuForm[key]);
					this.menuForm[key] = ''
				}
			},
			handleBack() {
				if (this.menuFormStatus == 1) {
					this.menuFormStatus = 0
				} else {
					this.showAddMenu = false
				}
			},
			handleNext() {
				// console.log(this.menuForm,'menuForm');

				this.menuFormStatus = 1
			},
			menuFormSubmit(e) {
				const formData = e.detail.value
				for (let key in this.menuForm) {
					console.log(key, this.menuForm[key]);
					if (!this.menuForm[key]) {
						uni.showToast({
							icon: 'none',
							title: '请填写完整信息!',
							duration: 2000
						});
						return
					}
				}
				// this.showAddMenu = false
				console.log('menuForm发生了submit事件，携带数据为：', this.menuForm)
				request(`/supervision/ledger/save`, {
					method: 'POST',
					data: this.menuForm
				}).then((res) => {
					if (res.data.code == 200) {
						this.initMenuList()
						this.closeAddMenu()
						uni.showToast({
							icon: 'none',
							title: '新增成功',
							duration: 2000
						});
					}
					console.log(res.data, 'updateDirectory');
				})
			},
			formSubmit(e) {
				const formData = e.detail.value
				console.log('form发生了submit事件，携带数据为：', e.detail.value)
				if (!formData.newValue) {
					uni.showToast({
						icon: 'none',
						title: '请填写有效数据',
						duration: 2000
					});
					return
				}
				this.handleClose()
				let data = {}
				if (this.showUnit) {
					data = {
						oldUnitProject: this.currentEdit,
						unitProject: formData.newValue,
					}
				} else if (this.showBranch) {
					data = {
						oldDivisionProject: this.currentEdit,
						divisionProject: formData.newValue,
					}
				} else if (this.showItem) {
					data = {
						oldSubitemProject: this.currentEdit,
						subitemProject: formData.newValue,
					}
				} else if (this.showBatch) {
					data = {
						oldInspectionBatch: this.currentEdit,
						inspectionBatch: formData.newValue,
					}
				}
				request(`/supervision/ledger/updateDirectory`, {
					method: 'POST',
					data
				}).then((res) => {
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							duration: 2000
						});
						this.initMenuList()
					}
					console.log(res.data, 'updateDirectory');
				})
			},
			hanleUnit(showUnit) {
				this.initInfo()
				this.showUnit = !showUnit
				this.listType = '单位工程名称'
				this.unitList = this.menuData
			},
			hanleBranch(showBranch) {
				if (!this.currentUnit) {
					uni.showToast({
						icon: 'none',
						title: '请先选择上级目录',
						duration: 2000
					});
					return
				}
				this.initInfo()
				this.showBranch = !showBranch
				this.listType = '分部工程名称'
				this.branchList = this.unitList.filter(item => {
					return item.name == this.currentUnit
				})[0].children
				console.log(this.branchList, 'this.branchList');
			},
			hanleItem(showItem) {
				if (!this.currentUnit || !this.currentBranch) {
					uni.showToast({
						icon: 'none',
						title: '请先选择上级目录',
						duration: 2000
					});
					return
				}
				this.initInfo()
				this.showItem = !showItem
				this.listType = '分项工程名称'
				this.itemList = this.branchList.filter(item => {
					return item.name == this.currentBranch
				})[0].children
				console.log(this.itemList, 'this.itemList');
			},
			hanleBatch(showBatch) {
				if (!this.currentUnit || !this.currentBranch || !this.currentItem) {
					uni.showToast({
						icon: 'none',
						title: '请先选择上级目录',
						duration: 2000
					});
					return
				}
				this.initInfo()
				this.showBatch = !showBatch
				this.listType = '检验批划分'
				this.batchList = this.itemList.filter(item => {
					return item.name == this.currentItem
				})[0].children
				console.log(this.batchList, 'this.batchList');
			},
		}
	}
</script>

<style lang="scss">
	@import "@/style/tabPage.scss";

	.menu {
		margin-top: 50rpx;

		.select {
			display: flex;
			font-size: 24rpx;
			font-weight: 500;
			margin-top: 20rpx;
			align-items: center;
			color: rgba(31, 154, 255, 1);

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.list {
			width: 65vw;
			margin-top: 10rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			background-color: #ffffff;

			.list_box {
				padding: 0 10rpx;
				max-height: 300rpx;
				overflow-y: auto;
				// background-color: #55aaff;
			}

			.item {
				display: flex;
				align-items: center;
				margin: 10rpx 0;
				justify-content: space-between;
			}
		}
	}




	.u-popup /deep/ .u-popup__content {
		width: 600rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 40rpx;

		.u-safe-bottom {
			padding: 0 !important;
		}

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.blank {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.form {
			width: 100%;
			padding: 20rpx;

			// background-color: #b0edff;
			.title_text {
				margin: 20rpx 0;

				text {
					color: rgba(255, 87, 51, 1);
				}
			}

			.confirm {
				width: 98%;
				margin-top: 50rpx;
			}
		}
	}
</style>